解决vue-router在同一个路由下切换,取不到变化的路由参数问题
最近用vue写项目的时候碰到一个问题，在同一个页面下跳转，路由地址不变，路由参数有变化，一开始只是在data里取路由的参数，发现根本取不到变化的路由参数。在网上查找了一番后发现可以这样写：watch: { '$route' (to, from) { //这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行...
2024-01-10
vue-quill-editor插入图片路径太长问题解决方法
最近做项目的时候有一个发布新闻的需求，新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。由于项目是用 Vue 开发的，所以找编辑器的时候选了 vue-quill-editor 。编辑器长如下的样子：现在的问题但是这个编辑器会把插入的图片会转成 base64 位的编码，使得编辑器内容保存进数据库的...
2024-01-10
vue实践---vue不依赖外部资源实现简单多语操作
vue使用多语，最常见的就是 vue-i18n, 但是如果开发中的多语很少，比如就不到10个多语，这样就没必要引入vue-i18n了， 引入了反正导致代码体积大了，这时候单纯用vue实现多语就是比较好的选择。第一步首先建立一个locales.js 存放多语语言包的内容，这里只写了 zh-CN, en这两种语言，其他还想新增的话 ...
2024-01-10
基于vue-cli构建vue-router的入门级demo
本案列仅针对刚刚入门vue学习的伙伴，博主也是刚刚在学基于vue-cli搭建脚手架项目，对于前端大牛，可以移步。快速搭建vue-cli环境如何搭建基于vue-cli项目，这里不再叙述，如果不会的伙伴可以自己百度。项目搭建完成后，基本文件目录如下：打开我们刚刚创建的my-project文件夹，这里对文件夹下的...
2024-01-10
vue-router定义元信息meta操作
router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound from '../views/NotFound.vue'import TestChild from '../views/TestChild.vue'import AView from '../vi...
2024-01-10
Vue --》 如何在vue中调用百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save2.在首页index.html中引入百度地图: <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script> 我申请的**为 ：3bVHdeo2ZZaZO4QczC63d0kMsbA55ZSD3.在显示地图的组件中 template 中： <div class="baidumap" id="a...
2024-01-10
Vue关于使用vue-router控制视图渲染的问题。
环境：Vue2.0 + vue-router + element-ui + 新手,思路：想通过正则判断vue-router的$route.path来控制SideBar组件的渲染与否，具体代码如下：App.vue<template> <div id="app"> <div class="warper"> <div class="header"> <TopBar></TopBar> </div> <el-row><el-col :span="2" > ...
2024-01-10
vue-router 基础
安装NPMnpm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)如果使用全局的 script 标签，则无须如此（手动安装）。开始用Vue.js+vue-router创建单页应用，是非常简单的。使用Vue.js,我们已...
2024-01-10
vue钩子函数mounted,页面回退时不执行
一、问题描述目前在做一个电商项目，在商品列表list点击item商品的查看详情按钮时，首次进入详情页，页面会进行渲染，钩子会走mounted,但回退之后，再点击其他商品详情，详情页不会进行更新渲染。问题代码如下：商品列表页：商品详情页：二、解决办法将钩子mounted的操作放入钩子activated，...
2024-01-10
vue项目中router路由配置
介绍路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》安装本地环境安装路由插件vue-router： cnpm install vue-router --save-dev 配置两种配置方法：在main.js中 || 在src/router文件夹下的index.js中这里只说在src/router/index.js中引入：import Vue from 'vue'import Router from 'vue-rou...
2024-01-10React和Vue中监听变量变化的方法
React 中本地调试React代码的方法yarn build场景假设有这样一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state。16之前在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换16之后在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听， getDerivedSta...
2024-01-10
你不知道的React 和 Vue 的20个区别【源码层面】
前言面试竞争力越来越大，是时候撸一波Vue和React源码啦； 本文从20个层面来对比Vue和React的源码区别； 如果需要了解API的区别，请戳： Vue 开发必须知道的 36 个技巧 React 开发必须知道的 34 个技巧文章源码：请戳，原创码字不易，欢迎star！1.Vue和React源码区别1.1 Vue源码来张Vue源码编译过程图图...
2024-01-10
高性能和可扩展的React-Redux
注意：文章很长，只想了解逻辑而不深入的，可以直接跳到总结部分。初识首先，从它暴露对外的API开始ReactReduxContext/*提供了 React.createContext(null)*/Provider /*一个储存数据的组件，渲染了ContextProvider，内部调用redux中store.subscribe订阅数据，每当redux中的数据变动，比较新值与旧值，判断是否重...
2024-01-10
vue.js与react.js相比较的优势
vue.js的简介vue.js是一个javascript mvvm库，它是以数据驱动和组件化的思想构建的。我们平时多用js去操作dom，vue.js则是使用了数据绑定驱动来操作dom的，也就是说创建了view和model之间的绑定后，当model数据层发生变化时，view的dom就会发生相应变化。mvvm即是model-view-viewmodel，model和view之间的衔接交互都是...
2024-01-10MySQL和SQL Server之间的区别
MySQL和SQL Server都是关系数据库管理系统或RDBMS。MySQL是开源的，可以免费使用，而SQL Server是Microsoft的许可产品。以下是MySQL和SQL Server之间的重要区别。序号键的MySQLSQL服务器1拥有/开发者MySQL由Oracle拥有。SQL Server由Microsoft开发。2语言支持MySql支持C ++，Java之类的编程语言，并且对Perl，TCL和Haskel具有运行支...
2024-01-10
在项目vue中使用echarts的操作步骤
1.在组件中创建该模块<template> <div id = "testChart"></div></template>2.导入echarts前提是：已经在项目中配置过echarts在<script></script>中导入echarts<script>import {echartInit} from "../../../utils/echartUtils"</script>3.初始化该模块 export default { name: 'Test', //vue该组件名称Test.vue moun...
2024-01-10
React、Vue浅析
关注前端的同学都了解，React和Vue是目前应用很广泛的两个前端框架。React是由Facebook开发的，Vue起初则是由google一名程序员尤雨溪开发的。截止到目前github上显示，React的Star数为87422，Vue的为78523，数据差距越来越小。两个框架国内外使用概况如图1所示： 图1 国外前端框架使用概况 ...
2024-01-10
React 和 vue的区别以及React的环境搭建，运行
# React## React 和 vue- React 和 vue 同属MVVM框架 - M:model - V:VIEW - VIEWMODEL- React 全部是在js中定义的，不象vue将文件拆分为3部分。- react 不存在模板的说法## 虚拟DOM- 概念 - DOM是浏览器...
2024-01-10
vue和react中循环key的作用
没用过react开发项目，但想来跟vue在循环渲染中key的作用应该原理是一样的。循环在没有使用key的时候，vue会警告。但是这个key的作用是什么。vue官方文档：当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项...
2024-01-10详解vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发//在父组件里使用子组件<son-tmp> <div>我是文字，我需要放到son-tmp组件里面制定的位置</div></son-tmp>单个插槽父组件app.vue<template> <div id="app"> <test-slot> <span>我是父组件里的文字，但是我要被放到子组件里</span> </test-slot> </div> </template> <scrip...
2024-01-10
Vue.observable
1.介绍：如果项目不是足够大的话，为避免代码繁琐冗余，最好不要使用它。Vue.observable 是vue2.6版本新增的，可以实现一些简单的跨组件数据状态共享// 创建store目录，store目录下创建index.jsimport Vue from 'vue'export const store = Vue.observable({ count: 0, name: '李四'})export const mutations = { setCount (count) { st...
2024-01-10
关于vue slot组件以及v-slot指令的一些思考
前言本文只讨论vue2.6.x以上的版本。以前的API已经被depreciated，详见官方文档官方文档已经描述的足够清晰和简单，我只是通过用图例的方式加强印象开门见山vue的slot也就内容分发，仔细思考这个名字就不难发现，他是将父组件的内容分发到子组件中的多个<slot></slot>组件中。所以下图形象描述了...
2024-01-10
vue中的slot与slot-scope
实际上，插槽的概念很简单，下面通过分三部分来讲。这个部分也是按照vue说明文档的顺序来写的。进入三部分之前，先让还没接触过插槽的同学对什么是插槽有一个简单的概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心...
2024-01-10
【前端】使用vue的slot传递问题
目录结构: 需求: 编写一个table组件(类似iview的table),table-body组件中需要做个树形展示功能,其中一种实现是想通过在table-body设置slot标签,让用户直接在app的table标签里面写上相应代码就可以展示相应内容,预览图: 问题: 这是app的HTML代码(swTable就是table组件):table-body 代码: 这中间隔着一个table.vue,请问怎么...
2024-01-10
vue---splitpane分割
首先安装：npm install vue-splitpane引入使用：import splitPane from 'vue-splitpane'Vue.component('split-pane', splitPane);分割成两列<split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical"> <template slot="paneL"> A </template> <temp...
2024-01-10
vue-devtools下载与使用
网盘地址提取码：ty1m如果地址过期了，可以到csdn下载：csdn地址1.安装我们打开chrome的扩展程序，讲刚下载的文件拖进去，就可以安装了。2.更改一些配置首先打开chrome的开发者模式，然后允许vue-devtool在隐身模式使用，和允许访问网址。改好之后，还需要修改插件的一个配置，找到插件的安装目...
2024-01-10
vue slot+传参
插槽分为默认插槽和具名插槽：默认插槽： //父组件<div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild></div>//子组件<div> <h4>子组件</h4> <slot></slot></div>具名插槽： 注意：具名插槽需要包裹在 template 标签中，否则会报错//父组件<div> <h3>父组件</h3> <tes...
2024-01-10
Vue.js03：v-model实现简易计算器
v-model用于数据的双向绑定。bug不少，凑合看吧，主要是练习v-model。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</...
2024-01-10vue实现留言板todolist功能
通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist.第一步、使用bootstrap做好布局<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap.min.css"/> <script src="lib/jquery-1.7.2.js"></...
2024-01-10
